<template>
  <v-chart
    :style="style"
    :option="widget.option"
    :update-options="{ notMerge: true }"
    autoresize
  />
</template>
<script>
import "../china/js/china";
import "../china/js/province/anhui";
import "../china/js/province/aomen";
import "../china/js/province/beijing";
import "../china/js/province/chongqing";
import "../china/js/province/fujian";
import "../china/js/province/gansu";
import "../china/js/province/guangdong";
import "../china/js/province/guangxi";
import "../china/js/province/guizhou";
import "../china/js/province/hainan";
import "../china/js/province/hebei";
import "../china/js/province/heilongjiang";
import "../china/js/province/henan";
import "../china/js/province/hubei";
import "../china/js/province/hunan";
import "../china/js/province/jiangsu";
import "../china/js/province/jiangxi";
import "../china/js/province/jilin";
import "../china/js/province/liaoning";
import "../china/js/province/neimenggu";
import "../china/js/province/ningxia";
import "../china/js/province/qinghai";
import "../china/js/province/shandong";
import "../china/js/province/shanghai";
import "../china/js/province/shanxi";
import "../china/js/province/shanxi1";
import "../china/js/province/sichuan";
import "../china/js/province/taiwan";
import "../china/js/province/tianjin";
import "../china/js/province/xianggang";
import "../china/js/province/xinjiang";
import "../china/js/province/xizang";
import "../china/js/province/yunnan";
import "../china/js/province/zhejiang";
import { renderWidgetData } from "../tools/DataUtils";
export default {
  props: {
    widget: {
      type: [Object],
      default: () => {},
    },
  },
  data() {
    return {
      render: null,
    };
  },
  computed: {
    style() {
      return {
        width: this.widget.location.width + "px",
        height: this.widget.location.height + "px",
      };
    },
    option() {
      return {
        map: this.widget.option.geo.map,
        zoom: this.widget.option.geo.zoom,
        center: this.widget.option.geo.center,
      };
    },
    data() {
      return this.widget.data;
    },
    refresh() {
      return this.widget.service.timestamp;
    },
  },
  watch: {
    option: {
      handler(val) {
        this.widget.option.series[0].map = val.map;
        this.widget.option.series[0].zoom = val.zoom;
        this.widget.option.geo.center[0] = val.center[0];
        this.widget.option.geo.center[1] = val.center[1];
        this.widget.option.series[0].center[0] = val.center[0];
        this.widget.option.series[0].center[1] = val.center[1];
      },
      deep: true,
    },
    data: {
      handler() {
        this.refreshWidgetInfo();
      },
      deep: true,
    },
    refresh: {
      handler() {
        this.refreshWidgetInfo();
      },
    },
  },
  mounted() {
    this.refreshWidgetInfo();
  },
  destroyed() {
    this.recoveryRenderObject();
  },
  methods: {
    refreshWidgetInfo() {
      this.recoveryRenderObject();
      this.render = renderWidgetData(this.widget, this.refreshWidgetData);
    },
    refreshWidgetData(data) {
      const option = this.widget.option;
      option.series[1].data = data;
    },
    recoveryRenderObject() {
      if (this.render && this.render.apiTimer) {
        clearInterval(this.render.apiTimer);
        this.render.apiTimer = null;
      }
      if(this.render && this.render.websocket) {
        this.render.websocket.doDisconnect();
      }
    },
  },
};
</script>